<template>
  <div class="singer-box">
    <div class="singer">
      <singerCard :dataone="titleOne" name="语种" @toFather="fromSon"></singerCard>
      <singerCard :dataone="titleTwo" name="全部" @toFather="fromSon1"></singerCard>
      <singerCard :dataone="titleThree" name="筛选" @toFather="fromSon2"></singerCard>
    </div>
    <div class="singer-list">
      <div class="ittem" v-for="(item,index) in singerList" :key="index">
        <img :src="item.img1v1Url" alt="">
        <div class="bottom">
          <div class="name">{{item.name}}</div>
          <div class="icon">
            <i class="el-icon-user-solid
"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import singerCard from "@/components/singercard.vue"
  import {
    getSingerList
  } from "@/network/singer.js"
  export default {
    name: "Singer",
    data() {
      return {
        titleOne: ["华语", "欧美", "日本", "韩国", "其他"],
        titleTwo: ["全部", "男歌手", "女歌手", "乐队组合"],
        titleThree: [
          "热门",
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
          "O",
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U",
          "V",
          "W",
          "X",
          "Y",
          "Z",
          "#",
        ],
        type: -1,
        initial: -1,
        area: -1,
        singerList: []
      }
    },
    components: {
      singerCard
    },
    created() {
      this.getSingerListM(this.type, this.initial, this.area)
    },
    methods: {
      getSingerListM(type, initial, area) {
        getSingerList("/artist/list", {
          type: type,
          initial: initial,
          area: area,
          limit: 20
        }).then(res => {
          console.log(res);
          this.singerList = res.artists
          console.log(this.singerList);
        })
      },
      fromSon(item){
        console.log(item);
        // 匹配后台数据 area
        switch(item){
          case "全部":
            this.area=-1
          break;
          case "其他":
            this.area=0
          break;
          case "华语":
            this.area=7
          break;
          case "欧美":
            this.area=96
          break;
          case "韩国":
            this.area=16
          break;
           case "日本":
            this.area=8
          break;
        }
        this.getSingerListM(this.type, this.initial, this.area)
      },
      fromSon1(item){
         console.log(item);
        // 匹配后台数据 type
        switch(item){
          case "全部":
            this.type=-1
          break;
          case "男歌手":
            this.type=1
          break;
          case "女歌手":
             this.type=2
          break;
          case "乐队组合":
            this.type=3
          break;
         
        }
        this.getSingerListM(this.type, this.initial, this.area)
      },
      fromSon2(item){
        console.log(item);
        // 匹配后台数据 initial
        switch(item){
          case "全部":
            this.initial=0
          break;
           case "#":
            this.initial=0
          break;
           case "热门":
            this.initial=-1
          break;
          default:
          this.initial = item.toLowerCase()
         
        }
        this.getSingerListM(this.type, this.initial, this.area)
      }

    }
  }
</script>

<style scoped lang="less">
  .singer-box {

    .singer-list {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .ittem {
        width: 250px;
        height: 280px;
        border: 1px solid;
        margin-bottom: 16px;
        .bottom {
          display: flex;
          justify-content: space-between;
          padding: 2px 5px;
          .icon {
            color: skyblue;
            border: 1px solid skyblue;
            // border-radius: 50%;
          }
        }
        img {
          width: 100%;
        }
      }
    }
  }
</style>